import React from 'react';

import BannerAnim, { Element,Thumb,Arrow } from 'rc-banner-anim';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import 'rc-banner-anim/assets/index.css';
const BgElement = Element.BgElement;
class Banner extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      innerHeight: window.screen.width/3,
    };
  }
 componentDidMount(){
  window.addEventListener('resize',(e)=>{
    console.log(window.screen.width)
    this.setState({
      innerHeight:e.target.innerWidth/3
    })
  })
 }
  render() {

    return (
      <BannerAnim key={'llll'}  arrow={false}  prefixCls="banner-user" style={{height:this.state.innerHeight}} autoPlay autoPlaySpeed={4000} type="gridBar" duration={1000} >
        <Element 
          prefixCls="banner-user-elem"
          key="0"
        >
          <BgElement
            key="bg"
            className="bg bg1"
          />
          {/* <img src={require('../assets/banner1.jpg')}  alt="" /> */}
        </Element>
        <Element 
          prefixCls="banner-user-elem"
          key="1" 
        >
          <BgElement
            key="bg"
            className="bg bg2"
          />
          {/* <img src={require('../assets/banner2.jpg')} alt="" /> */}
        </Element>
        <Thumb key="thumb" prefixCls='thumb'>
          <div className='thumbItem' key={'thumb1'}></div>
          <div className='thumbItem' key={'thumb2'}></div>
        </Thumb>
      </BannerAnim>
      );
    
  }
}
export default Banner;
